<template>
  <div class="app-container">
    <el-container class="dcs-main-container" >
      <el-aside class="real-aside" width="300px">
        <div style="margin-bottom: 10px"></div>
        <el-row style="height: 40px">
          <el-input prefix-icon="el-icon-search" style="width:100%" v-model="apvQuery.name" placeholder="关键字"></el-input>
        </el-row>
        <div style="margin-bottom: 20px"></div>
        <el-row>
          <el-tree v-loading="treeLoading" class="dcs-left-tree"  ref="OrganizeTreeRef" :check-strictly="true" :filter-node-method="filterNode" :data="OrganizeTree"
                       :props="treeProps" node-key="id" default-expand-all  show-checkbox :close-on-click-modal="false" @check="treeCheck" @node-click="nodeCheck">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>
                <span v-if="data.type==OrgnizeType.ANCESTOR" class="mgl-10"><span class="tenant-title">{{ data.name }}</span></span>
                <span v-else-if="data.type==OrgnizeType.FACTORY" class="mgl-10"><span class="company-title">{{ data.name }}</span><el-tag v-if="data.sub_title" type="info" size="mini">({{ data.sub_title }})</el-tag></span>
                <span v-else-if="data.type==OrgnizeType.DEPARTENT" class="mgl-10"><span class="department-title">{{ data.name }}</span></span>
              </span>
            </span>
          </el-tree>
        </el-row>
      </el-aside>
      <el-container>
        <el-main v-loading="mdlLoading">
          <el-empty description="请选择组织" v-if="!apvQuery.orgnization_id" />
          <div class="tb-view" v-if="apvQuery.orgnization_id">
            <el-table style="width: 100%" :data="moduleList" element-loading-text="Loading" border fit highlight-current-row>
              <el-table-column type="index" label="序号" width="80"></el-table-column>
              <el-table-column prop="cn_name" label="模块名称"></el-table-column>
              <el-table-column prop="en_name" label="英文标识"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-link icon="el-icon-edit" @click="handleUpdate(scope.$index,scope.row)">流程编辑</el-link>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-bottom: 50px"></div>
            <el-pagination :current-page="1" :page-sizes="[20, 30, 40, 50, 60]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="moduleList.length"></el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <approve-line :line-data="apvQuery" />
  </div>
</template>

<script>
  import moduleApi from '@/api/module'
  import debounce from 'lodash/debounce'
  import { confirm,OrgnizeType } from '@/utils/constants'
  import approveLine from './approve-line'
  export default {
    name: 'approve-define',
    components:{
      approveLine
    },
    data(){
      return {
        apvQuery:{
          name:null,
          apShow:false,
          module_name:null,
          orgnization_id:null
        },
        treeLoading:false,
        mdlLoading:false,
        OrgnizeType,
        OrganizeTree: [],
        treeProps: {
          label: 'name',
          children: 'children'
        },
        moduleList:[]
      }
    },
    watch: {
      'apvQuery.name': debounce(function(val) {
        this.$refs.OrganizeTreeRef.filter(val)
      }, 600)
    },
    created() {
      this.fetchData()
      this.fetchModuleList()
    },
    methods:{
      async fetchData() {
        this.treeLoading = true
        this.OrganizeTree = await this.$store.dispatch('user/ownedOrgnizes',4)
        this.treeDefaultCheck()
        this.treeLoading = false
      },
      fetchModuleList(){
        moduleApi.rptModuleList().then(res=>{
          this.moduleList = res.data
        })
      },
      treeDefaultCheck(){
        const firstNode = this.OrganizeTree[0].children[0]
        this.$nextTick(()=>{
          this.$refs['OrganizeTreeRef'].setChecked(firstNode.id, true, false)
          this.treeCheck(firstNode)
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      handleUpdate(idx, row){
        this.apvQuery.module_name=row.en_name
        this.apvQuery.apShow=true
      },
      treeCheck(row,data){
        this.mdlLoading=true
        const needClosed = this.$refs.OrganizeTreeRef.getCheckedKeys().filter(ck=>ck!=row.id)
        needClosed.forEach(ck=> {
          this.$refs.OrganizeTreeRef.setChecked(ck, false, false)
        })
        const currentOrgIds = this.$refs.OrganizeTreeRef.getCheckedKeys()
        this.apvQuery.orgnization_id = null
        if (currentOrgIds.length)
          this.apvQuery.orgnization_id = currentOrgIds[0]
        if (!this.apvQuery.orgnization_id)
          this.$message.warning("请选择组织!")
        setTimeout(()=>{
          this.mdlLoading=false
        },500)
      },
      nodeCheck(row, node, el){
        this.$refs['OrganizeTreeRef'].setChecked(row.id, true, false)
        this.treeCheck(row)
      }

    }

  }
</script>

<style lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .tenant-title{
    font-weight: normal;
    color:$tenant-color;
  }
  .company-title{
    font-weight: lighter;
    color: $company-color;
    font-size: small;
    margin-right: 10px;
  }
  .department-title{
    font-weight: lighter;
    color: $department-color;
    font-size: small;
  }
  .app-container{
    padding: 0;

      .dcs-main-container{
        width: 100%;
        min-height: calc(100vh - 84px);
      }
      .real-aside{
        margin-bottom: 0;
        max-height:calc(100vh - 84px);
        overflow-y: auto;

        .el-tree{
          min-height: calc(100vh - 204px);
          padding-top: 10px;
          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
        }

        .el-tree>.el-tree-node{
          display: inline-block;
          min-width: 100%;
        }

    }
    .date-search-header{
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tb-view{
      width: 100%;
    }


  }

</style>
